<template>
  <ul class="discount">
    <li v-for="(item,key) in discountlist" :key="key">
      <div class="orange" v-if="type == 0 || type == 1">
        <span class="span1">
            <p>&yen;<strong>{{item.c_shop_price}}</strong> </p>
        </span>
        <span class="span2">
            <p>{{item.c_name}}</p>
            <p>{{item.c_begintime}}-{{item.c_endtime}}</p>
        </span>
        <span class="span3">
        <slot name="get">
          <p v-if="type==0" v-on:click="get(item.c_id)">立即领取</p>
          <p v-if="type==1" @click="index123">立即使用</p>
        </slot>
      </span>
      </div>

      <div class="gray" v-if="type == 2 || type == 3">
        <span class="span1">
            <p>&yen;<strong>{{item.c_shop_price}}</strong> </p>
        </span>
        <span class="span2">
            <p>{{item.c_name}}</p>
            <p>{{item.c_begintime}}-{{item.c_endtime}}</p>
        </span>
        <span class="span3">
        <slot name="get">
          <p v-if="type==2">已使用</p>
          <p v-if="type==3">已失效</p>
        </slot>
      </span>
      </div>
    </li>
  </ul>
</template>

<script>
import { Toast } from 'vant'
import Vue from 'vue'
Vue.use(Toast)

export default {
  name: 'DiscountList',
  props: {
    discountlist: {
      type: Object | Array
    },
    type: {
      type: String | Number
    }
  },
  data () {
    return {}
  },
  methods: {
    get (e) {
      this.$emit("parentget",e)
      Toast.success('领取成功')
    },
    index123 () {
      this.$router.push({ name: 'home' })
    }
  },
  computed: {

  }
}
</script>

<style lang="less" scoped>
  .gray{
    width: 90%;
    height: 100px;
    margin-left: 5%;
    background: url("./../../../assets/img/mydiscount2.png") center center ;
    background-size: 100% auto;
    background-repeat: no-repeat;
    margin-top: 15px;
    display: flex;
    flex-direction: row;
  }

  .orange {
    width: 90%;
    height: 100px;
    margin-left: 5%;
    background: url("./../../../assets/img/mydiscount.png") center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    margin-top: 15px;
    display: flex;
    flex-direction: row;
  }
  .span1 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 30%;
    color: #fd6250;
  strong {
    font-size: 35px;
    font-weight: 600;
    margin-left: 2px;
  }
  }
  .span2{
    width: 51%;
    margin: 0 2%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  p:first-child{
    font-size: 14px;
    margin-bottom: 4px;
  }
  p:last-child{
    font-size: 12px;
    color: #9f9f9f;
  }
  }
  .span3{
    width: 2%;
    height: 100%;
    margin-left: 6%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: white;
    line-height: 16px;
  }

</style>
